<template>
    <div
        style="display: flex;flex-direction: column;height: 100%;width: 100%;background-color: white;border-radius: 10px;align-items: center;">
        <div
            style="display: flex;flex-direction: column;background-color: #F6F7FB;border-radius: 10px;width: 99%;margin: 20px 0;align-items: flex-start;">
            <el-button style="margin: 10px;" @click="addDevice">添加拍摄设备</el-button>
            <div style="width: 100%;" v-for="item in devicesArr">
                <div style="display: flex;width: 100%;align-items: center;margin: 10px;">
                    <div style="width: 150px;text-align: left;">
                        单人拍摄人像数量
                    </div>
                    <el-input style="width: 200px;margin:0 10px;" type="number" @input="changeInput(item)"
                        v-model="item.numberOfSoloShots"></el-input>张
                </div>
                <div style="display: flex;width: 100%;align-items: center;margin: 10px;">
                    <div style="width: 150px;text-align: left;">
                        保留照片天数
                    </div>
                    <el-input style="width: 200px;margin:0 10px;" type="number" @input="changeInput(item)"
                        v-model="item.saveDays"></el-input>天
                </div>
                <div style="display: flex;width: 100%;align-items: center;margin: 10px;">
                    <div style="width: 150px;text-align: left;">
                        人像裁剪宽度
                    </div>
                    <el-input style="width: 200px;margin:0 10px;" type="number" @input="changeInput(item)"
                        v-model="item.portraitCropWidth"></el-input>Px
                </div>
            </div>

        </div>
    </div>
</template>

<script>
import request from "../axios/request";
export default {
    data() {
        return {
            devicesArr:[]
        }
    },
    methods:{
        async getDeviceList(){
            let resOfGettingDeviceList=await request({
                url: "/api/shootDevice/getDevicesList",
                method: "GET"
            });
            if (resOfGettingDeviceList.data.status == 200) {
                this.devicesArr=resOfGettingDeviceList.data.data
            }
        },
        async addDevice(){
            let resOfAddNewDevice=await request({
                url: "/api/shootDevice/addNewDevice",
                method: "GET"
            });
            if (resOfAddNewDevice.data.status == 200) {
                this.getDeviceList()
            }
        },
        async changeInput(item){
            await request({
                url: "/api/shootDevice/update",
                method: "POST",
                data: item
            });
        }
    },
    mounted(){
        this.getDeviceList()
    }
}
</script>

<style scoped></style>